<template>
  <view class="infoicon">
    <view
      :class="
        memberstore.infoArr.find((v) => v.newsId == NewsItem.newsId)?.clickLike == true
          ? 'like active'
          : 'like'
      "
      @tap.stop="like(NewsItem.newsId)"
      ><text class="iconfont icon-xihuan"
        >&nbsp;{{ memberstore.infoArr.find((v) => v.newsId == NewsItem.newsId)?.likeCount }}</text
      >
    </view>
    <view class="scan"
      ><text class="iconfont icon-liulan">&nbsp;{{ NewsItem.viewCount }}</text></view
    >
    <view
      :class="
        memberstore.infoArr.find((v) => v.newsId == NewsItem.newsId)?.clickFavorite == true
          ? 'comman active'
          : 'comman'
      "
      @tap.stop="favorite(NewsItem.newsId)"
      ><text class="iconfont icon-shoucang1"
        >&nbsp;{{
          memberstore.infoArr.find((v) => v.newsId == NewsItem.newsId)?.favoriteCount
        }}</text
      ></view
    >
    <view class="publishtime"
      ><text>{{ formatTime(NewsItem.releaseTime) }}</text></view
    >
  </view>
</template>

<script setup lang="ts">
import { ClickFavorite, ClickLike } from '@/services/news'
import { useMemberStore } from '@/stores/index'
import { ref, defineProps } from 'vue'
import { formatTime } from '@/utils/time'
import type { newsItem } from '../../../types/index'
const memberstore = useMemberStore()
type Info = {
  viewCount: number
  likeCount: number
  favoriteCount: number
  clickLike: boolean
  clickFavorite: boolean
  newsId: number
  releaseTime: string
}
let query = defineProps<{ newsitem: Info }>()

let NewsItem: Info = query.newsitem
const like = async (id: number) => {
  await ClickLike({ newsId: NewsItem.newsId, account: memberstore.profile?.user.account })
  memberstore.click_like(NewsItem.newsId)
  // NewsItem.clickLike = !NewsItem.clickLike
  // if (NewsItem.clickLike) {
  //   NewsItem.likeCount++
  // } else {
  //   NewsItem.likeCount--
  // }
}
const favorite = async (id: number) => {
  await ClickFavorite({ newsId: NewsItem.newsId, account: memberstore.profile?.user.account })
  memberstore.click_favourte(NewsItem.newsId)
  // NewsItem.clickFavorite = !NewsItem.clickFavorite
  // if (NewsItem.clickFavorite) {
  //   NewsItem.favoriteCount++
  // } else {
  //   NewsItem.favoriteCount--
  // }
}
</script>

<style lang="scss">
.infoicon {
  display: flex;
  justify-content: space-between;
  padding: 0 10rpx;
  font-size: 36rpx;
  color: #7a7979;
  .publishtime {
    color: #7a7979;
    font-size: 32rpx;
  }
}
.active {
  color: #f04142;
}
</style>